<template>
  <view class="swiper-box">
    <block v-if="list && list.length > 0">
      <swiper
        class="swiper"
        :autoplay="autoplay"
        :circular="true"
        :indicator-dots="false"
        :disable-touch="false"
        :interval="interval"
        :duration="duration"
        @change="swiperChange"
      >
        <swiper-item
          v-for="(item, i) in list"
          :key="i"
          @tap.stop="click(item)"
          class="item"
        >
          <image
            width="100%"
            :height="imgHeight"
            :style="{ height: imgHeight }"
            mode="scaleToFill"
            class="item"
            :src="item.image"
          >
          </image>
        </swiper-item>
      </swiper>
      <view
        class="pointer"
        :style="{ bottom: pointerBottom + 'rpx' }"
        v-if="pointer"
      >
        <block v-for="(item, i) in list" :key="i">
          <view
            @tap.stop="changePointer(i)"
            :style="[i === current ? activeStyle : InactiveStyle]"
            :class="i === current ? 'pointer_active' : 'pointer_inactive'"
          ></view>
        </block>
      </view>
    </block>
  </view>
</template>
<script lang="ts">
import { defineComponent, ref, toRefs } from "vue";
export default defineComponent({
  props: {
    pointerBottom: { type: [String, Number], default: 20 },
    pointer: { type: Boolean, default: true },
    autoplay: { type: Boolean, default: true },
    list: { type: Array, default: [] },
    activeStyle: { type: Array, default: [] },
    InactiveStyle: { type: Array, default: [] },
    imgHeight: { type: String, default: "100%" },
    interval: { type: Number, default: 2500 },
    duration: { type: Number, default: 100 },
  },
  setup(props: any, context: any) {
    const prop = toRefs(props);
    const current = ref<number>(0);
    function swiperChange(e: any): void {
      current.value = e.detail.current;
      context.emit("change", e);
    }

    function click(item: object): void {
      context.emit("click", item);
    }

    function changePointer(i: number): void {
      current.value = i;
    }
    return {
      prop,
      current,
      swiperChange,
      click,
      changePointer,
    };
  },
});
</script>

<style lang="scss" scoped>
.swiper-box {
  position: relative;
  width: 100%;
  height: 100%;
  .swiper {
    width: 100%;
    height: 100%;
    .item {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
  .pointer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: baseline;
    .pointer_active {
      width: 30rpx;
      height: 6rpx;
      margin: 0 7rpx;
      border-radius: 8rpx;
      background: #ffffff;
    }
    .pointer_inactive {
      width: 30rpx;
      height: 6rpx;
      margin: 0 7rpx;
      border-radius: 8rpx;
      opacity: 0.6;
      background: #f5f5f5;
    }
  }
}
</style>
